<template>
  <div class="register-form-container">
    <a-form
      id="formLogin"
      ref="formLogin"
      :form="form"
      @submit="handleRegister"
    >
      <a-form-item style="margin-bottom:0;">
        <a-form-item
          label="First Name"
          :colon="false"
          :style="{ display: 'inline-block', width: 'calc(50% - 20px)', 'margin-right': '40px' }"
          required
        >
          <a-input
            v-decorator.trim="[
              'first_name',
              {
                rules: [
                  formRules.required('Incorrect first name invalid'),
                  formRules.letter('Incorrect first name invalid')
                ],
                validateFirst: true,
                validateTrigger: 'change'
              }
            ]"
            size="large"
            type="text"
            placeholder="First Name"
          />
        </a-form-item>

        <a-form-item
          label="Last Name"
          :colon="false"
          :style="{ display: 'inline-block', width: 'calc(50% - 20px)' }"
          required
        >
          <a-input
            v-decorator.trim="[
              'last_name',
              {
                rules: [
                  formRules.required('Incorrect last name invalid'),
                  formRules.letter('Incorrect last name invalid')
                ],
                validateFirst: true,
                validateTrigger: 'change'
              }
            ]"
            size="large"
            type="text"
            placeholder="lastName"
          />
        </a-form-item>
      </a-form-item>

      <a-form-item
        label="Email"
        :colon="false"
        required
      >
        <a-input
          v-decorator.trim="[
            'email',
            {
              rules: [
                formRules.required('Incorrect email invalid'),
                formRules.email('Incorrect email invalid')
              ],
              validateFirst: true,
              validateTrigger: 'change'
            }
          ]"
          size="large"
          type="text"
          placeholder="Email"
        />
      </a-form-item>

      <a-form-item
        label="Verification Code"
        :colon="false"
        class="a-form-item-send-code"
      >
        <a-button
          shape="round"
          class="send-code"
          size="small"
          :disabled="isSendCode"
          @click="sendEmailCode"
        >
          {{ codeText }}
        </a-button>
        <a-input
          v-decorator.trim="[
            'code',
            {
              rules: [
                formRules.len({ len: 6 }, 'Incorrect code invalid'),
              ],
              validateTrigger: 'change'
            }
          ]"
          size="large"
          type="text"
          placeholder="Verification Code"
        />
      </a-form-item>

      <a-form-item
        label="Choose a Password"
        :colon="false"
        required
      >
        <a-input-password
          v-decorator.trim="[
            'password',
            {
              rules: [
                formRules.passWord()
              ],
              validateFirst: true,
              validateTrigger: 'change'
            }
          ]"
          size="large"
          type="text"
          placeholder="Choose a Password"
        />
      </a-form-item>

      <a-form-item
        label="Confirm Password"
        :colon="false"
        required
      >
        <a-input-password
          v-decorator.trim="[
            'confirm_password',
            {
              rules: [
                formRules.passWord(),
                { validator: confirmPasswordFormRule }
              ],
              validateFirst: true,
              validateTrigger: 'change'
            }
          ]"
          size="large"
          type="text"
          placeholder="Confirm Password"
        />
      </a-form-item>

      <a-form-item>
        <a-checkbox
          v-decorator.trim="[
            'agreement',
            {
              valuePropName: 'agreement',
              force: true,
              rules: [
                { validator: agreementRule }
              ],
              validateTrigger: 'change'
            }
          ]"
        >
          I have read and accepted the
          <a
            href=""
            @click.prevent
          >
            XXXagreement
          </a>
        </a-checkbox>
      </a-form-item>

      <!-- shape="round" -->
      <a-button
        html-type="submit"
        type="primary"
        size="large"
        block
        :loading="state.loginBtn"
        @click="handleRegister"
      >
        Register
      </a-button>
    </a-form>

    <div class="login-tips-text">
      Existing account ?
      <router-link
        class="link"
        :to="{ name: 'login' }"
      >
        Login
      </router-link>
    </div>
  </div>
</template>

<script>
import form from './form';
import formRules from '@/utils/form/rules';
import { email } from '@/utils/mixins/sendCode';

export default {
  mixins: [form, email],

  data() {
    return {
      formRules
    };
  }
};
</script>

<style lang="scss">
.register-form-container {
  // has-error
  .has-error .ant-input:focus {
    border-right-width: 0!important;
    box-shadow: none
  }

  input:focus {
    // border: none;
    box-shadow: none;
    border-bottom-color: $theme-color;
  }
  input {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid $gray-16;
  }
  .ant-form label {
    color: $gray-17;
  }
  .ant-form-item {
    margin-bottom: 18px;
  }
  .login-tips-text {
    color: $gray-17;
    margin-top: $margin-xs;
    .link {
      cursor: pointer;
      color: $theme-color;
    }
  }
}
</style>
